<template>
  <div id="main">
    <el-card shadow="always" >
      <div slot="header">
        <span>商城管理后台 - {{isLogin ? '登录' : '注册'}}</span>
      </div>
      <el-form label-width="80px"
               v-show="isLogin"
               :ref="'form'"
               status-icon
               :model="loginForm"
               style="min-width: 500px;"
               label-position="right"
               :rules="loginFormRule">
        <el-form-item prop="username" label="用户名">
          <el-input v-model="loginForm.username"></el-input>
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input v-model="loginForm.password" type="password" v-on:keypress.enter="login('form')"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login('form')">登录</el-button>
          <el-button @click="goRegister">商户注册</el-button>
        </el-form-item>
      </el-form>
      <el-form label-width="80px"
               v-show="!isLogin"
               :ref="'registerForm'"
               status-icon
               :model="registerForm"
               style="min-width: 500px;"
               label-position="right"
               :rules="registerFormRule">
        <el-form-item prop="email" label="邮箱地址">
          <el-input type="email" v-model="registerForm.email">
            <template slot="append">
              <el-button @click="sendEmail">{{note}}</el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="code" label="验证码">
          <el-input :disabled="disabled" v-model="registerForm.code"></el-input>
        </el-form-item>
        <el-form-item prop="username" label="用户名">
          <el-input :disabled="disabled" v-model="registerForm.username"></el-input>
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input :disabled="disabled" v-model="registerForm.password" type="password" v-on:keypress.enter="login('form')"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="goLogin">登录</el-button>
          <el-button type="primary" @click="register">商户注册</el-button>
        </el-form-item>
      </el-form>

    </el-card>
  </div>
</template>

<script>
  import {login,sendYzm, register} from "../api/app";
  import store from "@/store/index";

  export default {
    name: "index",
    data() {
      return {
        isLogin: true,
        loginFormRule: {
          username: [{required: true, message: '请输入用户名'}],
          password: [{required: true, message: '请输入密码'}]
        },
        loginForm: {
          username: '',
          password: ''
        },
        registerFormRule: {
          email: [{required: true, message: '请输入邮箱'}, {type:'email', message: '请输入邮箱'}],
          code: [{required: true, message: '请输入验证码'}],
          username: [{required: true, message: '请输入用户名'}],
          password: [{required: true, message: '请输入密码'}]
        },
        registerForm: {
          email: '',
          code: '',
          username: '',
          password: ''
        },
        note: '发送验证码',
        second: 0,
        disabled: true
      }
    },
    methods: {
      async login(form) {
        this.$refs[form].validate( async (valid) => {
          if (!valid) {
            this.$message.error('请正确填写信息');
            return;
          }
          let res = await login({
            userName: this.loginForm.username,
            passWord: this.loginForm.password
          });
          store.commit('SET_TOKEN', res.token);
          localStorage.setItem('token', res.token);
          this.$message.success('成功');
          this.$router.push('/')
        })
      },
      goRegister() {
        this.isLogin = false;
      },
      goLogin() {
        this.isLogin = true;
      },
      async register() {
        this.$refs['registerForm'].validate( async (valid) => {
          if (!valid) {
            this.$message.error('请正确填写信息');
            return;
          }
          await register({
            confirmPassword: this.registerForm.password,
            emailVerificationCode: this.registerForm.code,
            passWord: this.registerForm.password,
            userName: this.registerForm.username,
          })
          this.$message.success('注册成功');
          this.loginForm.username = this.registerForm.username;
          this.isLogin = true;
        })
      },
      sendEmail() {
        this.$refs['registerForm'].validateField('email', (valid) => {
          if (!valid) {
            this.disabled = false;
            if (this.note !== '发送验证码') {
              this.$message.info('别着急, 验证码已经在路上咯~');
              return;
            }
            sendYzm({email: this.registerForm.email});
            this.second = 60;
            this.note = this.second + ' 秒';
            setInterval(() => {
              if (this.second === 0) return;
              this.second -= 1;
              if (this.second === 0) {
                this.note = '发送验证码';
              } else {
                this.note = this.second + ' 秒';
              }
            }, 1000);
          }
        })
      }
    }
  }
</script>

<style scoped>
#main {
  width: 100%;
  height: 100%;
  display: flex;
  margin-top: 200px;
  justify-content: center;
  align-items: center;
}
</style>
